<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学号+姓名+照片拼图</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            padding: 20px;
            background: #fff;
        }
        .game-container {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }
        #L2023001 {
            font-family: "楷体", serif;
            font-size: 18px;
            padding: 20px;
            background: #F1F8E9;
            border-radius: 8px;
            margin-bottom: 20px;
            transition: all 0.3s ease;
        }
        .puzzle-container {
            width: 600px;
            height: 600px;
            margin: 20px auto;
            position: relative;
            background: #E8F5E9;
            border: 2px solid #4CAF50;
            border-radius: 8px;
        }
        .puzzle-piece {
            width: 200px;
            height: 200px;
            position: absolute;
            cursor: move;
            transition: box-shadow 0.3s;
            background-size: cover;
            border: 1px solid #4CAF50;
        }
        .puzzle-piece:hover {
            box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
        }
        .puzzle-target {
            width: 200px;
            height: 200px;
            position: absolute;
            border: 2px dashed #4CAF50;
            box-sizing: border-box;
        }
        .correct-position {
            border: 2px solid #4CAF50;
            box-shadow: 0 0 10px rgba(76, 175, 80, 0.5);
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script>
        $(document).ready(function() {
            // 初始化拼图位置
            const pieces = [
                {id: 1, x: 50, y: 50},
                {id: 2, x: 260, y: 50},
                {id: 3, x: 50, y: 260},
                {id: 4, x: 260, y: 260},
                {id: 5, x: 50, y: 470},
                {id: 6, x: 260, y: 470},
                {id: 7, x: 470, y: 50},
                {id: 8, x: 470, y: 260},
                {id: 9, x: 470, y: 470}
            ];
            
            // 创建拼图块
            pieces.forEach(piece => {
                const $piece = $(`<div class="puzzle-piece" id="piece${piece.id}"></div>`);
                $piece.css({
                    left: piece.x + 'px',
                    top: piece.y + 'px',
                    backgroundImage: `url(assets/2023001_hometown_${piece.id}.jpg)`
                });
                $('.puzzle-container').append($piece);
                
                // 创建目标位置
                const targetX = ((piece.id - 1) % 3) * 200;
                const targetY = Math.floor((piece.id - 1) / 3) * 200;
                const $target = $(`<div class="puzzle-target" data-piece="${piece.id}"></div>`);
                $target.css({
                    left: targetX + 'px',
                    top: targetY + 'px'
                });
                $('.puzzle-container').append($target);
            });
            
            // 设置拖拽功能
            $('.puzzle-piece').draggable({
                containment: '.puzzle-container',
                snap: '.puzzle-target',
                snapMode: 'inner',
                snapTolerance: 200,
                stop: function(event, ui) {
                    const piece = $(this);
                    const piecePos = piece.position();
                    const pieceId = parseInt(piece.attr('id').replace('piece', ''));
                    const targetX = ((pieceId - 1) % 3) * 200;
                    const targetY = Math.floor((pieceId - 1) / 3) * 200;
                    
                    if (Math.abs(piecePos.left - targetX) < 20 && Math.abs(piecePos.top - targetY) < 20) {
                        piece.addClass('correct-position');
                        
                        // 当特定拼图块（比如第一块）放置正确时显示信息
                        if (pieceId === 1) {
                            alert('2023001 张三 13812345678');
                        }
                        
                        // 检查是否完成拼图
                        if ($('.correct-position').length === pieces.length) {
                            alert('恭喜你完成拼图！');
                        }
                    } else {
                        piece.removeClass('correct-position');
                    }
                }
            });
            
            // 说明文字层效果
            $('#L2023001').hover(
                function() {
                    $(this).css({
                        background: '#E8F5E9',
                        transform: 'scale(1.02)'
                    });
                },
                function() {
                    $(this).css({
                        background: '#F1F8E9',
                        transform: 'scale(1)'
                    });
                }
            );
        });
    </script>
</head>
<body>
    <div class="game-container">
        <div id="L2023001">
            拼图游戏说明：<br>
            1. 拖动拼图块到正确的位置<br>
            2. 所有拼图块都放置正确后游戏结束<br>
            3. 特定拼图块放置正确时会显示信息
        </div>
        
        <div class="puzzle-container">
            <!-- 拼图块和目标位置将通过JavaScript动态添加 -->
        </div>
    </div>
</body>
</html> 